<template>
	<div class="page">
		<div class="page__bd">
			<div class="weui-tab">
				<div class="weui-tab__panel">
					<div class="weui-tab__panel_top">
						<div class="top_title">
							<p>通讯录</p>
						</div>
					</div>
					<div class="weui-tab__panel_search">
						<input class="weui-tab__panel_search_inp" type="text" placeholder="搜索" />
						<i class="weui-icon-search"></i>
					</div>
					<div class="weui-tab__panel-bd">
						<el-col :span="24">
							<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
								<div class="bd_bg" v-for="(item,index) in list" :key="index">
									<el-submenu :index="''+index">
										<template slot="title" class="bd_bg_title">
											<span class="span_1">{{item.groupname}}</span>
											<span class="span_1">(</span>
											<span class="span_1">{{item.list.length}}</span>
											<span class="span_1">)</span>
										</template>
										<el-menu-item-group v-for="(items,indexs) in item.list" :key="indexs" :index="index+'-'+indexs" class="gropps">
											<el-menu-item class="group_1" @click="routerTo(items)">
												<img :src="baseurl + items.avatar" class="group_1_img" />
												<p class="group_1_p">{{items.username}}</p>
												<p class="group_2_p">{{items.sign}}</p>
											</el-menu-item>
										</el-menu-item-group>
									</el-submenu>
								</div>
							</el-menu>
						</el-col>
						</el-row>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'communication',
		data() {
			return {
				activeNames: ['1'],
				detail: false,
				list: {},
				baseUrl: '',
			}
		},
		methods: {
			routerTo(thisitems) {
				this.$router.push({
					path: 'PublicTel',
					query: {
						thisitems: thisitems,
						username: thisitems.username
					}
				})
			},
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			},
			handleChange(val) {
				console.log(val);
			},
			friendShow() {
				this.detail = true
			},
			friendHide() {
				this.detail = false
			},

		},
		created() {
			let _this = this;
			_this.baseUrl = this.NET.BASE_URL;
			var token = localStorage.getItem("appUserToken");
			var myFriendList = localStorage.getItem("myFriendList-" + token);
			//判断当前登录用户的好友列表缓存是否为空
			if(this.$util.isEmpty(myFriendList)) {//为空
				this.$post("/app/post/AppCompanyChatController/querycompanyDepartment", {}).then((json) => {
					if(json.returnCode === 0) {
						_this.list = json.rows;
						localStorage.setItem("myFriendList-" + token, JSON.stringify(json.rows));
					} else {
						this.$message({message: json.returnMessage});
					}
				});
			}else{//非空
				_this.list = JSON.parse(myFriendList);
			}
		}

	}
</script>

<style scoped="scoped">
	/*主体部分*/
	.weui-tab__panel-bd {
		width: 100%;
		height: calc(100% - 0.95rem);
		overflow-y: auto;
	}
	
	.bd_bg {
		width: 100%;
	}
	
	.el-submenu__title{
		height: 45px;
	}
	
	.roup {
		margin-left: 0.2rem;
	}
	
	.el-collapse-item__header {
		font-size: 0.2rem;
	}
	
	.weui-panel__bd {
		width: 100%;
		height: 0.5rem;
	}
	
	.bd_bg_1 {
		width: 100%;
	}
	
	.bd_bg_title {
		width: 100%;
		height: 0.5rem;
	}
	
	.span_1 {
		font-size: 1em;
	}
	
	.gropps {
		width: 100%;
	    float: left;
	}
	
	.group_1 {
		width: 100%;
		height: 50px;
		padding-left: 30px !important;
		float: left;
	}
	
	.group_1 .group_1_img {
		width: 40px;
	    height: 40px;
	    border-radius: 20px;
        float: left;
        margin: 10px 0;
	}
	
	.group_1 .group_1_p {
		font-size: 0.2rem;
		color: black;
	    float: left;
        margin-left: 5px;
	    font-size: 14px;
        height: 20px;
        line-height: 20px;
        width: calc(100% - 55px);
        margin-top: 10px;
	}
	
	.group_1 .group_2_p{
		font-size: 0.2rem;
		color: grey;
	    float: left;
        margin-left: 5px;
	    font-size: 12px;
        height: 20px;
        line-height: 20px;
        width: calc(100% - 55px);
	}

	.el-submenu__title{
		height: 3em !important;
	    line-height: 3em !important;
	    border-bottom: 1px solid;
	    border-bottom-color: gainsboro !important;
	}
	
	.el-menu-item-group__title{
		padding: 0px !important;
	}
  /**
* 搜索框
*/
  .weui-tab__panel_search {
    width: 100%;
    height: 3.5rem;
    background-color: RGB(239, 239, 244);
    opacity: 0.5;
    text-align: center;
    line-height: 3.5rem;
  }

  .weui-tab__panel_search input {
    width: calc(100% - 20px);
    height: 2rem;
    border-radius: 8px;
    border: 1px solid #ccc;
  }

  .weui-icon-search {
    position: absolute;
    font-size: 1.2rem;
    left: calc(50% - 2.3rem);
    margin-top: 1.1rem;
  }

  input::-webkit-input-placeholder {
    color: #aab2bd;
    font-size: 1rem;
    text-align: center;
  }
</style>
